<template>
  <div class="core">
    <!-- <a-tooltip>
      <template slot="title"> 记事本 </template>
      <img class="core_robatimg cursor_pointer" src="@/assets/images/notepad.png" @click="showInput()" />
      <div style="position: absolute; top: 58px; right: 63px; font-size: 16px; color: #000">记事本</div>
    </a-tooltip> -->

    <a-modal
      v-model="isShow"
      :title="renderTitle"
      :width="400"
      :maskClosable="false"
      :footer="null"
      @cancel="modalClosed"
    >
      <div style="text-align: center; font-size: 13px; margin-bottom: 20px">
        {{ this.acceptcode }}
      </div>
      <a-textarea
        v-model="notecontent"
        placeholder="输入框失焦保存"
        @blur="savenotepad()"
        style="width: 100%; height: 350px"
        class="notepad-textarea"
      >
      </a-textarea>
    </a-modal>
  </div>
</template>
<script>
import storage from 'store'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import { notebooksave } from '@/api/apply/apl_note.js'
import { nanoid } from 'nanoid'
import { editnotepad } from '@/views/base/NotePadModal.vue'
export default {
  props: {
    applyid: {
      type: String,
      require: true
    },
    acceptcode: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      loading: false, // 输入框加载状态
      question: undefined,
      isShow: false, // 显示输入框
      savequeryParam: {
        applyid: '', //申请号
        author: '', //创建人
        createdate: '', //最后记录时间
        userid: '', //userid
        id: '', //记事本id
        content: '' //记事本内容
      },
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      notecontent: ' ' //输入记事内容
    }
  },
  created () {},
  methods: {
    //title
    renderTitle () {
      return [
        '记事本',
        <img
          src={require('@/assets/images/accept/notepad.png')}
          style='width: auto; height: auto; margin-left: 5px;margin-bottom: 7px;'
        />
      ]
    },

    // 输入框弹出
    showInput () {
      this.isShow = !this.isShow
      this.notecontent = null
    },

    // 在模态框关闭时清空保存的参数
    modalClosed () {
      this.savequeryParam = {
        id: '',
        applyid: '',
        author: '',
        createdate: '',
        userid: '',
        content: ''
      }
      this.notecontent = '' // 清空输入框内容
    },

    //保存  记事本信息
    async savenotepad () {
      console.log('111')

      if (this.savequeryParam.id === '') {
        // 确保notecontent存在且不为空字符串
        if (!this.notecontent || this.notecontent.trim() === '') {
          // 可以添加一些提示或者直接返回
          this.$message.error('记事本内容不能为空')
          return
        }

        const currentDate = new Date()
        //const formattedDate = currentDate.toISOString().slice(0, 13);
        const inputDate = currentDate.toISOString().split('T')[0]
        const splitDate = inputDate.split('-')
        const formattedDate = `${splitDate[0]}年${parseInt(splitDate[1], 10)}月${parseInt(splitDate[2], 10)}日`

        this.savequeryParam.id = nanoid()
        this.savequeryParam.applyid = this.applyid
        this.savequeryParam.author = this.currentUser.fullname
        this.savequeryParam.createdate = formattedDate
        this.savequeryParam.userid = this.currentUser.userId
        this.savequeryParam.content = this.notecontent
        console.log('savequeryParam1', this.savequeryParam)

        let res = await notebooksave(this.savequeryParam).finally(() => {
          this.loading = false
        })
        if (res.code !== 0) {
          this.$message.error('保存失败')
        } else {
          this.$message.success('保存成功')
        }
        // this.notepadpopup = false;
        editnotepad()
      } else {
        if (!this.notecontent || this.notecontent.trim() === '') {
          // 可以添加一些提示或者直接返回
          this.$message.error('记事本内容不能为空')
          return
        }
        this.savequeryParam.content = this.notecontent
        let res = await notebooksave(this.savequeryParam).finally(() => {
          this.loading = false
        })
        if (res.code !== 0) {
          this.$message.error('保存失败')
        } else {
          this.$message.success('保存成功')
        }
        // this.notepadpopup = false;
        editnotepad()
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-modal-header {
  height: 36px;
  text-align: center;
  border-bottom: none;
  margin-top: 90px;
}
::v-deep .ant-modal-title {
  font-size: 22px; /* 设置标题的字号大小为 23像素 */
  font-weight: 550;
}

::v-deep .ant-modal-content,
::v-deep .ant-modal-content .ant-modal-header,
::v-deep .ant-modal-content .ant-modal-footer {
  border-radius: 15px; /* 设置圆角的半径，根据需要进行调整 */
}
.notepad-textarea {
  border-radius: 15px !important; /* 设置圆角的半径，根据需要进行调整 */
}

::v-deep .ant-input {
  height: 100%;
  border: none;
  background: rgb(250, 246, 246);
  padding: 10px 20px;
}
// 加载容器
::v-deep .ant-spin-container {
  height: 300px;
}
.core {
  // border: 1px solid red;
  &_robatimg,
  &_close,
  &_robatsend {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 36px;
    z-index: 0;
  }
  &_robatsend {
    width: 50px;
    height: 50px;
    bottom: 200px;
    right: 36px;
  }
  &_robatimg {
    width: 26px;
    height: 26px;
    top: 131px;
    right: 138px;
  }

  &_close {
    width: 20px;
    height: 20px;
    bottom: 378px;
    display: inline;
  }
  &_input {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 0;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 1px #ccc;
    height: 300px;
    margin-top: -10px;
    // padding: 10px 20px;
    &_active {
      width: 30%;
    }
    &_disable {
      width: 0%;
    }
  }
}
.fade {
  transition: all 0.6s;
}
</style>
